<template>
  <a-modal 
    :visible="visible"
    :title="title"
    okText="确定" 
    cancelText="取消"
    :maskClosable="false"
    :destroyOnClose="true"
    :keyboard="false"
    @cancel="closeModal()"
    @ok="handleSubmit"
    width="1000px">
    <div class="flex">
      <div class="left">
        <div class="title">全部分类</div>
        <a-tree
          v-model="checkedKeys"
          checkable
          :tree-data="treeGroupList"
          :replaceFields="replaceFields"
          :checkStrictly="true"
          @select="handleTreeSelect"
        />
      </div>
      <div class="right">
        <!-- <search-table :hideSelect="true" :url="url" ref="searchtable" :columns="columns"></search-table> -->
        <a-table
          :columns="columns" 
          :data-source="tableData"
          rowKey="id">
        </a-table>
      </div>
    </div>
  </a-modal>
</template>
<script>
export default {
  components:{
    
  },
  props: {
    visible:{
      type:Boolean,
      default:false,
    },
    selectedKeys:{
      type:Array,
      default(){
        return [];
      }
    }
  },
  computed:{
    title(){
      return '选择商品分类';
    }
  },
  data () {
    return {
      url:'/goods/page',
      goodsStatusList:[
        {
          label:'仓库中',
          value:1
        },{
          label:'上架',
          value:2
        },{
          label:'已下架',
          value:3
        },
      ],
      columns:[
        {
          title: '商品名称',
          dataIndex: 'goodsName',
          key: 'goodsName',
          customRender: (text, row) => {
            return <div class="product_td"><table-img src={row.goodsPicture}/><div class="product_name">{text}</div></div>
          }
        },
        {
          title: '价格',
          dataIndex: 'salePrice',
          key: 'salePrice',
          customRender:(text,row)=>{
            return ((text||0)/100).toFixed(2);
          }
        },
        {
          title: '总可售库存',
          dataIndex: 'goodsInventoryTotal',
          key: 'goodsInventoryTotal'
        },
        {
          title: '销量',
          dataIndex: 'realSales',
          key: 'realSales'
        },
        {
          title: '状态',
          dataIndex: 'goodsStatus',
          key: 'goodsStatus',
          customRender:(text,row)=>{            
            return (this.getStatusLabelByStatusValue(text) || {}).label;
          }
        },
        {
          title: '商品分类',
          dataIndex: 'goodsClassificationName',
          key: 'goodsClassificationName'
        },
        {
          title: '创建时间',
          dataIndex: 'createDate',
          key: 'createDate'
        },
      ],
      tableData:[],
      pagination:{
        current:1,
        size:10,
      },
      treeGroupList:[],
      checkedKeys:{},
      replaceFields:{
        children:'children', 
        title:'groupName', 
        key:'id'
      },
      selectedTreeKey:[],
    }
  },
  watch: {
    visible(newVal){
      this.pagination={
        current:1,
        size:10,
      }
      this.checkedKeys={
        checked:this.selectedKeys
      };
      this.treeGroupList=[];
      this.tableData=[];
      if(newVal){
       //this.getProductClassify();
       this.getProductGroupTree();
       this.getProductList();
      }
    }
  },
  created(){
    
  },
  mounted () {
  },
  methods: {
    closeModal (freshTable) {
      this.$emit('cancel', freshTable)
    },
    //商品分组
    async getProductGroupTree(){
      let res=await this.$get('/goods/group/tree');
      if(res && res.returnCode=='1000'){
        this.treeGroupList=res.dataInfo || [];
      }
    },
    //商品分类
    // async getProductClassify(){
    //   let res=await this.$get('/goods/classify/tree',{
    //     //shopId:this.userInfo.shopId || ''
    //   });
    //   if(res && res.returnCode=='1000'){
    //     this.productClassifyList=res.dataInfo || [];
    //   }
    //   else {
    //     this.productClassifyList=[];
    //   }
    // },
    getStatusLabelByStatusValue(value){
      return this.goodsStatusList.find(item=>{
        return item.value==value;
      })
    },
    handleTreeSelect(selectedKeys){
      this.selectedTreeKey=selectedKeys[0];
      this.getProductList();
    },
    //获取商品列表
    async getProductList(){
      let params={
        current:this.pagination.current,
        size:this.pagination.size,
        marketingType:1 // 2021/11/18
      };
      if(this.selectedTreeKey){
        params.goodsGroupId=this.selectedTreeKey;
      }
      let res = await this.$get('/goods/page',params);
      if(res && res.returnCode=='1000'){
        this.tableData=(res.dataInfo || {}).records || [];
      }
    },
    handleSubmit(){
      console.log('checkedKeys',this.checkedKeys.checked)
      this.$emit('submit',this.checkedKeys.checked);
    }
  }
}
</script>

<style lang="less" scoped>
.flex{
  display:flex;
  .left{
    width:200px;
    overflow: auto;
    .title{
      font-size:16px;
    }
  }
  .right{
    flex:1;
  }
}
</style>
